<template>
    <view class="pub_page  pub_login pub_find_pad pub_header_padding">
        <pub-head headerName="find_psd_psd" :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll page_box">
            <div class="logo_txt">
                <div class="p_1">欢迎来到</div>
                <div class="p_2">Chatterbox</div>
            </div>
            <div class="input_div">
                <div class="li li_1">
                    <input class="input" v-model="mobile" type="number" placeholder="请输入手机号" maxlength="11" disabled>
                </div>
                <div class="li li_2">
                    <input class="input" v-model="code" type="number" placeholder="请输入验证码" maxlength="6">
                    <div class="input_right_btn" @click="toSendCode">{{ code_msg }}</div>
                </div>
                <div class="li li_2">
                    <input class="input" v-model="password" type="password" placeholder="请输入支付密码" maxlength="6">
                </div>
            </div>
            <br>
            <br>
            <br>
            <div class="pub_btn" @click="toReset">立即修改</div>
            <br>
            <br>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pagescrollTop: 0,
            headerConfig: {
                title: '修改二级密码',//标题栏内容
                left_type: 3,
                header_color: 'rgba(0,0,0,0)',//标题栏背景色
            },

            code: '',
            code_msg: '请输入手机号',
            mobile: '',
            cardId: '',
            password: '',
        };
    },
    onLoad(option) {
        this.mobile = option.mobile || '';
    },
    onPageScroll(res) {
        this.pagescrollTop = res.scrollTop;
    },
    watch: {
        mobile() {
            if (this.code_msg.indexOf('剩') == -1) {
                if (this.mobile.length == 11 && this.$comFun.ValidateMobile(this.mobile)) {
                    this.code_msg = '发送验证码';
                } else {
                    this.code_msg = '请输入手机号';
                }
            }
        }
    },
    methods: {
        async toReset() {
            if (!this.$comFun.ValidateMobile(this.mobile)) {
                this.$comFun.toast('请输入正确的手机号');
                return;
            }
            if (this.code.length != 6) {
                this.$comFun.toast('请输入6位验证码');
                return;
            }
            // if (!this.cardId) {
            //     this.$comFun.toast('请输入认证身份证号');
            //     return;
            // }
            if (this.password.length != 6 || !this.$comFun.ValidateNum(this.password)) {
                this.$comFun.toast('请输入6位数字支付密码');
                return;
            }
            this.$comFun.openLoading();
            const res = await this.$request.post('user/upPayPassword', {
                mobile: this.mobile,
                code: this.code,
                // cardId: this.cardId,
                password: this.password,
            });
            // console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.$comFun.toast('修改成功');
                setTimeout(() => {
                    this.$comFun.closeWin();
                }, 1000);
            } else {
                this.$comFun.toast(res.message);
            }
        },
        async toSendCode() {
            if (this.mobile.length != 11) {
                // this.$comFun.toast('请输入正确的手机号');
                return;
            }
            if (this.code_msg == '发送验证码') {
                this.$comFun.openLoading();
                const res = await this.$request.post('public/sendSms', {
                    mobile: this.mobile
                });
                // console.log(res);
                this.$comFun.closeLoading();
                if (res.code == 200) {
                    this.codeTime();
                } else {
                    this.$comFun.toast(res.message);
                }
            }
        },
        codeTime() {
            this.code_msg = '剩 60 s';
            let count = 60;
            let time = setInterval(() => {
                if (count == 1) {
                    clearInterval(time);
                    if (this.$comFun.ValidateMobile(this.mobile)) {
                        this.code_msg = '发送验证码';
                    } else {
                        this.code_msg = '请输入手机号';
                    }
                    return;
                }
                count--;
                this.code_msg = '剩 ' + count + ' s';
            }, 1000);
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/login.scss";
</style>
